<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ include file="/view/master.jsp"%>

<div masterTag="pageBody">
	<div class="mask">
		<div class="content">
			<div class="title">记生日与情感</div>
			<div class="myInformationTitle">我的信息</div>
			<div class="myInformation">
				<div class="mail">
					<div class="emailTitle">邮箱：</div>
					<input class="email" id="email" placeholder="接收提醒的邮箱"/>
					<div class="clear"></div>
				</div>
			</div>
			<div class="otherInformationTitle">朋友的信息</div>
			<div class="otherInformation">
				<div class="names">
					<div class="nameTitle">姓名：</div>
					<input class="name" id="name" placeholder="对方的真实姓名"/>
					<div class="clear"></div>
				</div>
				<div class="type">
					<div class="typeTitle">类型：</div>
					<select class="typeValue" id="type">
						<option value="0" selected="selected">农历</option>
						<option value="1">公历</option>
					</select>
					<div class="clear"></div>
				</div>
				<div class="birthday">
					<div class="birthdayTitle">生日：</div>
					<select class="year" id="year"></select>
					<select class="months" id="months">
						<option value="1">正月</option>
						<option value="2">二月</option>
						<option value="3">三月</option>
						<option value="4">四月</option>
						<option value="5">五月</option>					
						<option value="6">六月</option>
						<option value="7">七月</option>
						<option value="8">八月</option>
						<option value="9">九月</option>
						<option value="10">十月</option>
						<option value="11">十一</option>
						<option value="12">腊月</option>
					</select>
					<select class="day" id="day">
						<option value="1">初一</option>
						<option value="2">初二</option>
						<option value="3">初三</option>
						<option value="4">初四</option>
						<option value="5">初五</option>					
						<option value="6">初六</option>
						<option value="7">初七</option>
						<option value="8">初八</option>
						<option value="9">初九</option>
						<option value="10">初十</option>
						<option value="11">十一</option>
						<option value="12">十二</option>
						<option value="13">十三</option>
						<option value="14">十四</option>
						<option value="15">十五</option>
						<option value="16">十六</option>
						<option value="17">十七</option>
						<option value="18">十八</option>
						<option value="19">十九</option>
						<option value="20">二十</option>
						<option value="21">廿一</option>
						<option value="22">廿二</option>
						<option value="23">廿三</option>
						<option value="24">廿四</option>
						<option value="25">廿五</option>
						<option value="26">廿六</option>
						<option value="27">廿七</option>
						<option value="28">廿八</option>
						<option value="29">廿九</option>
						<option value="30">三十</option>
					</select>
					<div class="clear"></div>		
				</div>
			</div>
			<div class="button" id="button">保存</div>
		</div>
	</div>
</div>

	<style type="text/css">
		body {
		    margin: 0;
		    padding: 0;
		    color: gray;
		    background-color: #eff2f7;
		    font-family: 'Microsoft YaHei', Sans-serif, Arial;
		    font-size: 14px;
		    line-height: 200%;
		}
		
		body>.globalMask {
			position: fixed;
		    top: 0;
		    left: 0;
		    bottom: 0;
		    right: 0;
		    background-color: transparent;
		    opacity: 0.7;
		    background-image: url(../images/wait.gif);
		    background-repeat: no-repeat;
		    background-position: center;
		    background-size: 64px;
		}
		
		p, ul, ol {
			margin: 0;
			text-ident: 2em;
		}
		
		.clear {
			clear: both !important;
		}
		
		.hidden {
			display: none !important;
		}
		
		.mask {
		    background-color: rgba(73,73,73,0.1);
		    z-index: 410;
		}
		
		.mask>.content {
			width: 400px;
			margin-top: 150px;
		    margin-left: auto;
		    margin-right: auto;
		    background-color: white;
		    border-radius: 5px;
		}
		
		.mask>.content>.title {
			text-align: center;
			font-size: 16px;
			line-height: 30px;
			color: #333;
			border-bottom: 1px solid #eee;
		}
		.mask>.content>.myInformationTitle {
			text-align: left;
			font-size: 16px;
			line-height: 30px;
			color: #333;
			border-bottom: 1px solid #eee;
		}
		
		.mask>.content>.myInformation {
			border-bottom: 1px solid #eee;
		}
		
		.mask>.content>.myInformation>.mail {
			margin: 5px 10px;
		}
		
		.mask>.content>.myInformation>.mail>.emailTitle {
			float: left;
		}
		
		.mask>.content>.myInformation>.mail>.email {
			float: left;
		    height: 30px;
		    line-height: 30px;
		}
		
		.mask>.content>.otherInformationTitle {
			text-align: left;
			font-size: 16px;
			line-height: 30px;
			color: #333;
			border-bottom: 1px solid #eee;
		}
		
		.mask>.content>.otherInformation {
			border-bottom: 1px solid #eee;
		}
		
		.mask>.content>.otherInformation>.names {
			margin-top: 5px;
			margin-left: 10px;
		}
		
		.mask>.content>.otherInformation>.names>.nameTitle {
			float: left;
			height: 30px;
		    line-height: 30px;
		}
		
		.mask>.content>.otherInformation>.names>.name {
			float: left;
			height: 30px;
		    line-height: 30px;
		}
		.mask>.content>.otherInformation>.type {
			margin-left: 10px;
		}
		
		.mask>.content>.otherInformation>.type>.typeTitle {
			float: left;
			height: 40px;
	    	line-height: 40px;
		}
		
		.mask>.content>.otherInformation>.type>.typeValue {
			float: left;
			height: 30px;
		    line-height: 30px;
		    margin-top: 5px;
		}
		
		.mask>.content>.otherInformation>.birthday {
			margin-left: 10px;
			padding-bottom: 10px;
			margin-top: 5px;
		}
		
		.mask>.content>.otherInformation>.birthday>.year,
		.mask>.content>.otherInformation>.birthday>.months,
		.mask>.content>.otherInformation>.birthday>.day {
			
			width: 80px;
			height: 30px;
			line-height: 30px;
		}
		
		.mask>.content>.otherInformation>.birthday>.birthdayTitle {
			float: left;
		}
		
		.mask>.content>.otherInformation>.birthday>.year {
		}
		
		.mask>.content>.otherInformation>.birthday>.months {
		}
		
		.mask>.content>.otherInformation>.birthday>.day {
		}
		
		.mask>.content>.button {
		    text-align: center;
		    background-color: navy;
		    width: 150px;
		    margin-left: auto;
		    margin-right: auto;
		    border-radius: 5px;
		    margin-top: 10px;
		    color: white;
		    cursor: pointer;
		}
	</style>

	<script type="text/javascript">
		$(function() {
			refreshOption();
			clickEvent();
		});
		
		function clickEvent() {
			$('#button').click(function() {
				var email = $('#email').val();
				if(!( /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/).test(email)) {
					alert("邮箱格式有误");
				}
				$.post('cp0000/setBirthday', {
					email: email,
					name: $('#name').val(),
					type: $('#type').val(),
					year: $('#year').val(),
					months: $('#months').val(),
					day: $('#day').val()
				}, showRusult, 'json');
			});			
		}
		
		function showRusult() {
			console.log('yes');
		}
		
		function refreshOption() {
			var genOpion = function (i) {
				var html = [];
				
				html.push(' <option value="'+ i +'">'+ i +'年</option>');
				
				var div = $(html.join('\r\n'));
				
				return div;
			}
			
			var container = $('#year');
			container.empty;
			
			for (var i=1900; i<=2049; i++) {
				var div = genOpion(i);
				container.append(div);
			}
		}
	</script>